<template>
  <!--<el-row>-->
  <!--测试-->
  <!--</el-row>-->
  <div v-if="question" class="section" :class="{ 'hidden-section': question.isRef }">
    <div v-if="!question.isRef || question.ref.counter >0">
      <el-row>
        <div class="topic">
          <label>{{question.topic}}
            <span v-if="question.isRef" style="color:orange">(关联)</span>
            <!--<span v-if-->
          </label>
        </div>
      </el-row>
      <div v-if="question.type === 'paragraph'"></div>
      <view-i-text v-else-if="question.type === 'input'" :question="question"></view-i-text>
      <view-i-radio v-else-if="question.type === 'radio'" :question="question" :tactics="tactics"></view-i-radio>
      <view-i-checkbox v-else-if="question.type === 'checkbox'" :question="question" :tactics="tactics"></view-i-checkbox>
      <view-i-datetime v-else-if="question.type === 'datetime'" :question="question"></view-i-datetime>
      <view-i-switch v-else-if="question.type === 'switch'" :question="question"></view-i-switch>
      <view-i-image v-else-if="question.type === 'image'" :question="question"></view-i-image>
      <view-i-table v-else-if="question.type === 'table'" :question="question">???</view-i-table>
      <div v-else>啥呀-{{question.topic}}</div>
    </div>
  </div>
</template>

<script>
  import ViewIText from "./iText";
  import ViewICheckbox from "./iCheckbox";
  // import ViewSectionControl from "./sectionControl";
  import ViewIRadio from "./iRadio";
  import ViewIDatetime from "./iDatetime";
  import ViewISwitch from "./iSwitch";
  import ViewIImage from "./iImage";
  import ViewITable from "./iTable";
  export default {
    components: {
      ViewITable,
      ViewIImage,
      ViewISwitch,
      ViewIDatetime,
      ViewIRadio,
      ViewICheckbox,
      ViewIText,
      // ViewSectionControl
    },
    name: "qa-view-controller",
    props:['question','tactics'],
    data() {
      return {
      }
    },
    created(){

    },
    methods:{
    }
  }
</script>

<style lang="scss">
  .section{
    margin:10px 5px;
    border:1px solid #cccccc;
    .topic{
      background-color: #efefef;
      height: 30px;
      line-height: 24px;
      padding:4px 6px;
      position:relative;
      label{
        box-sizing: border-box;
        display: inline-block;
        min-width: 150px;
        width: calc(100% - 100px);
      }
      .section-control{
        top: 0;
        right: 5px;
        position: absolute;
      }
    }
    .section-input{
      padding: 4px 6px;
    }
  }
  .hidden-section{
    border:1px dashed #000000;
    .topic{
      border-bottom:1px dashed #000000;
      color:#8a8a8a;
    }
  }
</style>
